<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
		<style>
			html,
			body,
			.mui-content {
				height: 0px;
				margin: 0px;
				background-color: #efeff4;
			}
			
			h5.mui-content-padded {
				margin-left: 3px;
				margin-top: 20px !important;
			}
			
			h5.mui-content-padded:first-child {
				margin-top: 12px !important;
			}
			
			.mui-btn {
				font-size: 16px;
				padding: 8px;
				margin: 3px;
			}
			
			.ui-alert {
				padding: 9px 30px;
				font-size: 16px;
			}
			
			* {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			
			.right {
				position: absolute;
				right: 0px;
			}
			
			.right1 {
				position: absolute;
				left: 126px;
			}
			
			.fsize {
				margin-top: 8px !important;
				font-size: 15px;
			}
			
			.fsize1 {
				margin-top: -2px !important;
				font-size: 15px;
			}
			
			.btnC {
				font-size: 16px;
				padding: 8px;
				margin: 2px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="resource.html" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">资源申请</h1>
			<button id='submit' class=" btnC  mui-btn-primary mui-pull-right">提交</button>
			<!--<a  class="mui-icon mui-icon-checkmarkempty mui-pull-right"></a>-->
		</header>
		<div class="mui-content">
			<div class="">
				<ul class="mui-table-view">
					<div class="mui-input-row">
						<label>申请人</label>
						<label id="people"></label>
					</div>
					<li class="mui-table-view-cell"></li>

					<div class="mui-input-row">
						<label>开始时间</label>
						<div class="ui-alert" id="ui1">
							<div id='demo' data-options='{}' class="active btn mui-icon mui-icon-arrowright right"></div>
							<div id='result' class="ui-alert1">请选择(必填)</div>
						</div>

					</div>

					<li class="mui-table-view-cell"></li>

					<div class="mui-input-row">
						<label>结束时间</label>
						<div class="ui-alert" id="ui2">
							<div id='demo1' data-options='{}' class="active btn1 mui-icon mui-icon-arrowright right"></div>
							<div id='result1' class="ui-alert1">请选择(必填)</div>
						</div>
					</div>
					<li class="mui-table-view-cell"></li>
					<div class="mui-input-row">
						<label>资源类别</label>
						<select class="" id="rtype">
							<option value="" disabled="" selected="">必填</option>
							<option value="item-1">会议室</option>
							<option value="item-2">设备</option>
						</select>
					</div>
					<li class="mui-table-view-cell"></li>
					<div class="mui-input-row">
						<label>资源</label>
						<select id="name" class="" onchange="finsum()">
							<option value="0">请选择 </option>

						</select>
					</div>

					<div id="selectsum" style="">
						<li class="mui-table-view-cell"></li>
						<div class="mui-input-row">
							<label>数量</label>
							<input id="sum" class="fsize" placeholder="请输入数量">
						</div>
					</div>

					<li class="mui-table-view-cell"></li>

					<div class="mui-input-row">
						<label>申请原因</label>
						<textarea class="fsize1" id="reason" rows="3" placeholder="请输入申请理由（必填）"></textarea>
					</div>

				</ul>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script src="js/public.js"></script>
		<script>
			var createBy = localStorage.getItem("employeeid");
			var str = new Array();
			var sgr = new Array();
			(function($) {
				$.init();
				var result = $('#result')[0];
				var btns = $('#ui1');

				var result1 = $('#result1')[0];
				var btns1 = $('#ui2');

				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							var tt = mcheck("开始" + rs.text + ":00");
							result.innerText = rs.text + ":00";

							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});

				btns1.each(function(i, btn1) {
					btn1.addEventListener('tap', function() {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						/*
						 * 首次显示时实例化组件
						 * 示例为了简洁，将 options 放在了按钮的 dom 上
						 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
						 */
						var picker = new $.DtPicker(options);
						picker.show(function(rs) {
							/*
							 * rs.value 拼合后的 value
							 * rs.text 拼合后的 text
							 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
							 * rs.m 月，用法同年
							 * rs.d 日，用法同年
							 * rs.h 时，用法同年
							 * rs.i 分（minutes 的第二个字母），用法同年
							 */
							var tt = mcheck("结束" + rs.text + ":00");
							result1.innerText = rs.text + ":00";

							/* 
							 * 返回 false 可以阻止选择框的关闭
							 * return false;
							 */
							/*
							 * 释放组件资源，释放后将将不能再操作组件
							 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
							 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
							 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
							 */
							picker.dispose();
						});
					}, false);
				});
			})(mui);

			mui.plusReady(function() {
				mlist();
				madd();
			});
			//是否显示数量框
			function listsum() {
				var rtype = document.getElementById("rtype").value;
				var sdiv = document.getElementById("selectsum");
				if(rtype == "item-1") {
					sdiv.style.display = "none";
					document.getElementById("sum").value = 1;
				} else if(rtype == "item-2") {
					sdiv.style.display = "";
				}
			}

			//数量
			function finsum() {
				var rtype = document.getElementById("rtype").value;
				if(rtype == "item-2") {
					var sum = document.getElementById("name").value;
					sgr = sum.split("-");
					document.getElementById("sum").value = sgr[1];
				}
			}

			function mlist() {
				mpeople();
				document.getElementById("rtype").addEventListener('change', function(e) {
					listsum();
					document.getElementById("sum").value = 0;
					var starttime = document.getElementById("result").innerText;
					var endtime = document.getElementById("result1").innerText;
					var rtype = document.getElementById("rtype").value;
					if(rtype == "item-1") {
						//通过点击资源类别关联会议室
						mui.ajax({
							url: 'http://113.71.26.27:8080/tpl/function/selectroom',
							async: true,
							type: 'post',
							timeout: 2000,
							data: {
								startTime: starttime,
								endTime: endtime
							},
							success: function(data) {
								var tt = "";
								tt += "<option>请选择</option>";
								if(data.length > 0) {
									for(var i = 0; i < data.length; i++) {
										tt += "<option>" + data[i] + "</option>";
									}
								}
								document.getElementById("name").innerHTML = tt;
							}
						});

					} else if(rtype == "item-2") {
						//通过点击资源类别关联设备
						mui.ajax({
							url: 'http://113.71.26.27:8080/tpl/function/selectequitment',
							async: true,
							type: 'post',
							timeout: 2000,
							data: {
								startTime: starttime,
								endTime: endtime
							},
							success: function(data) {
								var tt = "";
								tt += "<option>请选择</option>";
								for(var i = 0; i < data.length; i++) {
									tt += "<option value=" + data[i].name + "-" + data[i].sum + ">" + data[i].name + "</option>";

								}
								document.getElementById("name").innerHTML = tt;
							}
						});

					}
				});

			}
			
			//申请资源
			function madd() {
				document.getElementById("submit").addEventListener('click', function(e) {
					//表单数据
					var name = document.getElementById("name").value;
					var rtype = document.getElementById("rtype").value;
					sgr = name.split("-");
					name = sgr[0];
					maxsum = sgr[1];

					var starttime = document.getElementById("result").innerText;
					var endtime = document.getElementById("result1").innerText;
					var reason = document.getElementById("reason").value;
					//是否为会议室
					if(rtype == "item-2") {
						
						var sum = document.getElementById("sum").value;
						if(sum == 0 || sum == "" || starttime.indexOf("请选择") > 0 || endtime.indexOf("请选择") > 0 || reason == 0 || name.indexOf("选择") > 0 || rtype.indexOf("必填") > 0) {
							mui.toast("填写必要的信息");
						} else if(parseInt(sum) >parseInt( maxsum)) {
							mui.toast("空闲数量最大为" + maxsum);
						} else {
							var url = 'http://113.71.26.27:8080/tpl/function/';
							madd1(name, sum, starttime, endtime, reason, url + 'insertequitment');

						}
					} 
					if(rtype == "item-1") {
						if(starttime.indexOf("请选择") > 0 || endtime.indexOf("请选择") > 0 || reason == 0 || name.indexOf("选择") > 0 || rtype.indexOf("必填") > 0) {
							mui.toast("填写必要的信息");
						} else {
							var sum=1;
							var url = 'http://113.71.26.27:8080/tpl/function/';
							madd1(name, sum,starttime, endtime, reason, url + 'insertroom');

						}

					}

				});
			}

			function madd1(f1, f2, f3, f4, f5, f6) {
				//var deparment = document.getElementById("deparment").value;
				mui.ajax({
					url: f6,
					async: true,
					type: 'post',
					timeout: 2000,
					data: {
						name: f1,
						sum: f2,
						startTime: f3,
						endTime: f4,
						reason: f5,
						createBy: createBy
					},
					dataType: "text",
					success: function(data) {
						if(data == "1") {
							//列表页面
							window.location.href = "resource.html";
						}
					}
				});
			}

			//监听器开始时间与结束时间
			function mcheck(r1) {
				if(r1.substr(0, 2) == "开始") {
					str[0] = r1.substr(2, 20);
				} else {
					str[1] = r1.substr(2, 20);
				}
				if(mmtime(new Date) > str[0] && str[0] != null) {
					alert("开始时间不能小于或等于当前时间");
					window.location.href = "createresource.html";

				}
				if(str[0] != null && str[1] != null && str[0] >= str[1]) {
					alert("开始时间不能大于或等于结束时间");
					window.location.href = "createresource.html";
				}

				if(document.getElementById('rtype').value != "") {
					window.location.href = "createresource.html";
				}
			}
			/**
			 * 重写返回事件
			 */
			mui.back = function() {

				window.location.href = "resource.html";
			}
		</script>
	</body>

</html>